<template>
  <el-dialog :title="title" class="editPass" width="350px" :visible.sync="isDial" :before-close="closeDialog">
    <el-form :model="form" size="mini" ref="addJob">
      <el-form-item label="职位名称" prop='name' label-width="80px" >
        <el-input v-model="form.name" class="leftBorder" maxlength="10" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" size="mini" @click="saveJob">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            form:{
                name:"",
            },
            isDial:false,
            userInfo:'',
            title:'添加职位',
        }
    },
    created(){
        this.$root.$on("addJob",data=>{
            if(data=='add'){
                this.title='添加职位'
                let form={
                    name:'',
                    id:''
                }
                this.form=form
            }else{
                this.title='编辑职位'
                console.log(data)
                let form={
                    name:data.name,
                    id:data.id
                }
                this.form=form
            }
            
            this.isDial=true
        })
    },
    methods:{
        saveJob(){
            let that=this
            let form=that.form
            let met='POST'
            let params={
                name:form.name
            }
            if(this.title=='添加职位'){
                met='POST'
            }else{
                met='PUT';
                params.id=form.id
            }
            
            let url='role'
            console.log(params)
            request.ajaxPost({
                url,
                that,
                type:met,
                params,
                fn(res) {
                    console.log(res);
                    that.isDial=false
                    that.resetForm("addJob");
                    that.$root.$emit('jobList','no')
                }
            });
        },
        resetForm(ref) {
            //清空记录
            console.log('addJob')
            this.$refs[ref].resetFields();
        },
        closeDialog() {
            this.isDial = false;
            this.resetForm("addJob");
        },
    }
};
</script>
<style lang="less" scoped>
.editPass{
    text-align: left;
    .dialog-footer{
        margin-top: -20px;
        .tips{
            float: left;
            font-size: 12px;
            color: #5E6D82;
            line-height: 28px;
        }
    }
    .info{
        margin-top: -20px;
        margin-bottom: 20px;
        span{
            margin-right: 20px;
            color: #5E6D82;
            font-size: 12px;
            font-weight: 600;
        }
    } 
    .el-dialog__body{
        padding: 0px 20px !important;
    }
}
</style>
